<template>
    <div>
        <Modal v-model="modalSwitch" footer-hide width="1200">
            <p class="modal-title" slot="header">
                <span>详细信息</span>
            </p>
            <div>
                <Table class="modal-table" :loading="loading" :columns="listData" :data="distributionPeopleDetails" :height="tableHeight"></Table>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {distributionPeopleDetails} from 'api/distribution'

    export default {
        name: 'distributionGroupSelect',
        data () {
            return {
                // 弹窗开关
                modalSwitch: false,

                loading: true,

                // 列表数据
                listData: [
                    {
                        title: '提现时间',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('Time', {
                                props: {
                                    time: params.row.data.apply ? params.row.data.apply.time_create * 1000 : 0,
                                },
                                attrs: {
                                    type: "datetime"
                                }
                            });
                        }
                    },
                    {
                        title: '操作',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.data.text);
                        }
                    },
                    {
                        title: '详情',
                        align: 'center',
                        render: (h, params) => {
                            let renderingArray = params.row.order.map(item => [
                                h('div',{
                                    style: {
                                        padding: '10px 0',
                                    }
                                },item.text)
                            ])
                            return renderingArray;
                        }
                    },
                    {
                        title: '收入',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            let renderingArray = params.row.order.map(item => [
                                h('div',{
                                    style: {
                                        padding: '10px 0',
                                    }
                                },item.distribution_money_expected)
                            ])
                            return renderingArray;
                        }
                    },
                    {
                        title: '收入时间',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            let renderingArray = params.row.order.map(item => [
                                h('div',{
                                    style: {
                                        padding: '10px 0',
                                    }
                                },item.time_create)
                            ])
                            return renderingArray;
                        }
                    },
                ],

                distributionPeopleDetails: [],

                // 表格高度
                tableHeight: 400,
            }
        },
        mounted(){

            
        },
        methods: {

            // 打开详情
            openFn(_id){ 
                this.modalSwitch = true

                let params = {
                    distributionWithdrawApplyId: _id
                }

                distributionPeopleDetails(params).then(_data => {
                    this.distributionPeopleDetails = _data.data
                    this.$nextTick(() => {
                        this.loading = false

                        // 初始化表格高度/监听窗口变化
                        this.windowResizeFn()
                    })
                }).catch(_err => {
                    console.log(_err)
                })
            },

            // 监听窗口变化
            windowResizeFn(){
                // 设置表格高度
                let allHeight = document.body.clientHeight&&document.documentElement.clientHeight * 0.5

                this.tableHeight = parseInt(allHeight)
                
                // 监听窗口变化
                window.onresize = () => {
                    let allHeight = document.body.clientHeight&&document.documentElement.clientHeight * 0.5
                    this.tableHeight = parseInt(allHeight)
                };
            },
        }
    }
</script> 
<style lang="less" scoped>
.modal-title {
    text-align: center
}
</style>